<template>
  <div class="ChartView" ref="ChartView"></div>
  <div class="TimeLine" ref="TimeLine"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { HzChart } from '../lib/main'
import axios from 'axios'
import kafka from './WebSocket.js'

let ChartView = ref<HTMLElement>();
let TimeLine = ref();

const _Window = window as any;

onMounted(() => {
  _Window.Chart = new HzChart({
    Graph: {
      Dom: ChartView.value as HTMLElement,
    }
  })
})
var allContent = 434472;

axios.get('http://localhost:3000/').then(res => {
  console.log(res.data);
})

window.k = new kafka('ws://localhost:3001/');




</script>
<style>
.ChartView {
  /* width: 700px; */
  height: 400px;
  background-color: #2c3e50;
}

.TimeLine {
  margin-top: 10px;
  /* width: 700px; */
  height: 40px;
  background-color: #2c3e50;
  /* cursor: pointer; */
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
  /* position: absolute; */
}
</style>
